<template>
    <div id="home">
        <header>
            <div class="top">
                <img src="../../assets/img/home/mi.png" alt="" width="25px" height="17px">
               <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="search" name="" id="" value="" placeholder="搜索品牌或商品" @click="mysearch()"/>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                </svg>
            </div>
            <div class="nav">
            <ul>
                <li>推荐</li>
                <li>手机</li>
                <li>智能</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>家电</li>
                <li>生活</li>
                <li>服饰</li>
            </ul>
            </div>  
        </header>
        <div class="lb">
            <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../assets/img/home/lb1.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/home/lb2.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/home/lb3.jpg"></mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="session1">
            <img src="../../assets/img/home/s1.png" alt="">
            <img src="../../assets/img/home/s2.webp" alt="">
            <img src="../../assets/img/home/s3.webp" alt="">
            <img src="../../assets/img/home/s4.webp" alt="">
            <img src="../../assets/img/home/s5.webp" alt="">
            <img src="../../assets/img/home/s6.webp" alt="">
            <img src="../../assets/img/home/s7.png" alt="">
            <img src="../../assets/img/home/s8.png" alt="">
            <img src="../../assets/img/home/s9.webp" alt="">
            <img src="../../assets/img/home/s10.png" alt="">
        </div>
        <div class="session2">
            <router-link to="/morepro"><img src="../../assets/img/home/ss1.webp" alt=""></router-link>
            <router-link to="/morepro"><img src="../../assets/img/home/ss2.webp" alt=""></router-link>
            <router-link to="/morepro"><img src="../../assets/img/home/ss3.webp" alt=""></router-link>
        </div>
        <div class="session3">
            <router-link to="/morepro"><img src="../../assets/img/home/ss4.webp" alt=""></router-link>
            <router-link to="/morepro"><img src="../../assets/img/home/ss5.webp" alt=""></router-link>
        </div>
        <div class="session4">
            <div class="box" v-for="(v,i) in session4">
                <img :src="v.pic" alt="">
                <p>{{v.title}}</p>
                <span>{{v.txt}}</span>
                <p>{{v.price}}</p>
                <router-link to="/details"><div class="buybtn">立即购买</div></router-link>
            </div>
             <div class="more"><router-link to="/morepro">更多小米手机产品></router-link></div>
        </div>
        <div class="session5">
            <div class="con">
                <li><img src="../../assets/img/home/s51.webp" alt=""></li>
                <li><img src="../../assets/img/home/s52.webp" alt=""></li>
                <li><img src="../../assets/img/home/s53.webp" alt=""></li>
                <li><img src="../../assets/img/home/s54.webp" alt=""></li>
                <li><img src="../../assets/img/home/s55.webp" alt=""></li>
                <li><img src="../../assets/img/home/s56.webp" alt=""></li>
            </div>
            <!-- 
            <img src="../../assets/img/home/s52.webp" alt="">
            <img src="../../assets/img/home/s53.webp" alt="">
            <img src="../../assets/img/home/s54.webp" alt="">
            <img src="../../assets/img/home/s55.webp" alt="">
            <img src="../../assets/img/home/s56.webp" alt=""> -->
        </div>
        <div class="session6">
            <img src="../../assets/img/home/s61.webp" alt="">
        </div>
        <div class="bottombox"></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            session4:[],
        }
    },
    mounted(){
        var _this=this;
        this.$http.get('./data/home.json')
        .then(function (response){
            console.log(response);
            // console.log(this);
            _this.session4=response.data.session4;
        })
        .catch(function(error){
            console.log(error);
        })
    }
}
</script>
<style>
    .lb .mint-swipe-items-wrap{
        padding-bottom: 50%;
    }  
    .lb{
        margin-top:100px;
    }
    .lb img{
        width: 100%;
    }
</style>
<style lang="less" scoped>
    // 链接去下横线
    a{
        text-decoration: none;
    }
    ::-webkit-scrollbar {/*隐藏滚轮*/
		display: none;
    }
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 23px;
        margin:0 10px;
    }
    header{
        z-index: 3;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: white;
    }
    header>top{
       display: flex;
    }
    header{
        width: 100%;
    }
    header img{
        margin: 0 10px;
    }
    
    header input{
        border: none;
        display: inline-block;
        width: 60%;
        height: 33px;
    }
    header li{
        float: left;
        margin: 5px 10px;

    }
    header .nav{
        margin: 10px 0;
        overflow-y: hidden;
        overflow-x: scroll;
    }

    .nav>ul{
        width: 450px;
       
    }
    .lb img{
        width: 100%;
        height: auto;
    }
    .session1 img{
        width: 20%;
        float: left;
    }
    .session2 img{
        width: 50%;
        float: left;
    }
    .session3 img{
        width: 100%;
    }
    .session4,.session5{
        display: flex;
        flex-wrap: wrap;
    }
    .session4 .box{
        width: 50%;
    }
    .session4 .box img{
        width: 100%;
    }
    .session4 span{
        color: rgba(0,0,0,0.6);
        font-size: 13px;
    }
    .session4 .buybtn{
        margin: 10px 46px;
        background-color: #ea625b;
        color: white;
        line-height: 36px;
    }
    .session4 .more{
        width: 100%;
        line-height: 50px;
    }
    .session4 .more a{
        text-decoration: none;
        color: rgba(0,0,0,0.6);
    }
    
    .session5 .con{
        width: 100%;
        padding: 0 8px;
        display: flex;
        flex-wrap: wrap;
        background: #F6B568;
    }
    .session5 li{
        width: 48%;
        margin: 1%;
        list-style: none;
    }
    .session5 li>img{
        width: 100%;
    }
    .session6 img{
        width: 100%;
    }
    .bottombox{
        width: 100%;
        height: 100px;
    }
</style>